<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="{{pluResPath}}/resources/html/help/help.css" />
</head>

<body>
  <div style="height: 350px;"></div>
  {{each helpData val}}
  <div class="cont-box">
    <div class="help-group">{{val.group}}</div>
    <div class="help-table">
      <div class="tr">
        {{each val.list item}}
        <div class="td">
          <span class="help-icon help-icon-{{item.icon}}"></span>
          <strong class="help-title">{{item.title}}</strong>
          <span class="help-desc">{{item.desc}}</span>
        </div>
        {{/each}}
      </div>

    </div>
  </div>
  {{/each}}
  <div class="copyright">
    Xiuxian-Plugin<span class="version">{{version}}</span>
    & 星瀚工作室
  </div>
</body>

<style>
  body {
    transform: scale(1);
    background: url("{{pluResPath}}/resources/img/help/help.png");
    background-size: 100% auto;
  }

  .help-icon {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    border-radius: 5px;
    left: 6px;
    top: 12px;
    transform: scale(0.85);
    background: url('{{pluResPath}}/resources/img/help/icon.png') 0 0 no-repeat;
    background-size: 500px auto;
  }

  .help-icon-1 {
    background-position: -0px -0px
  }

  .help-icon-2 {
    background-position: -50px -0px
  }

  .help-icon-3 {
    background-position: -100px -0px
  }

  .help-icon-4 {
    background-position: -150px -0px
  }

  .help-icon-5 {
    background-position: -200px -0px
  }

  .help-icon-6 {
    background-position: -250px -0px
  }

  .help-icon-7 {
    background-position: -300px -0px
  }

  .help-icon-8 {
    background-position: -350px -0px
  }

  .help-icon-9 {
    background-position: -400px -0px
  }

  .help-icon-10 {
    background-position: -450px -0px
  }

  .help-icon-11 {
    background-position: -0px -50px
  }

  .help-icon-12 {
    background-position: -50px -50px
  }

  .help-icon-13 {
    background-position: -100px -50px
  }

  .help-icon-14 {
    background-position: -150px -50px
  }

  .help-icon-15 {
    background-position: -200px -50px
  }

  .help-icon-16 {
    background-position: -250px -50px
  }

  .help-icon-17 {
    background-position: -300px -50px
  }

  .help-icon-18 {
    background-position: -350px -50px
  }

  .help-icon-19 {
    background-position: -400px -50px
  }

  .help-icon-20 {
    background-position: -450px -50px
  }

  .help-icon-21 {
    background-position: -0px -100px
  }

  .help-icon-22 {
    background-position: -50px -100px
  }

  .help-icon-23 {
    background-position: -100px -100px
  }

  .help-icon-24 {
    background-position: -150px -100px
  }

  .help-icon-25 {
    background-position: -200px -100px
  }

  .help-icon-26 {
    background-position: -250px -100px
  }

  .help-icon-27 {
    background-position: -300px -100px
  }

  .help-icon-28 {
    background-position: -350px -100px
  }

  .help-icon-29 {
    background-position: -400px -100px
  }

  .help-icon-30 {
    background-position: -450px -100px
  }

  .help-icon-31 {
    background-position: -0px -150px
  }

  .help-icon-32 {
    background-position: -50px -150px
  }

  .help-icon-33 {
    background-position: -100px -150px
  }

  .help-icon-34 {
    background-position: -150px -150px
  }

  .help-icon-35 {
    background-position: -200px -150px
  }

  .help-icon-36 {
    background-position: -250px -150px
  }

  .help-icon-37 {
    background-position: -300px -150px
  }

  .help-icon-38 {
    background-position: -350px -150px
  }

  .help-icon-39 {
    background-position: -400px -150px
  }

  .help-icon-40 {
    background-position: -450px -150px
  }

  .help-icon-41 {
    background-position: -0px -200px
  }

  .help-icon-42 {
    background-position: -50px -200px
  }

  .help-icon-43 {
    background-position: -100px -200px
  }

  .help-icon-44 {
    background-position: -150px -200px
  }

  .help-icon-45 {
    background-position: -200px -200px
  }

  .help-icon-46 {
    background-position: -250px -200px
  }

  .help-icon-47 {
    background-position: -300px -200px
  }

  .help-icon-48 {
    background-position: -350px -200px
  }

  .help-icon-49 {
    background-position: -400px -200px
  }

  .help-icon-50 {
    background-position: -450px -200px
  }

  .help-icon-51 {
    background-position: -0px -250px
  }

  .help-icon-52 {
    background-position: -50px -250px
  }

  .help-icon-53 {
    background-position: -100px -250px
  }

  .help-icon-54 {
    background-position: -150px -250px
  }

  .help-icon-55 {
    background-position: -200px -250px
  }

  .help-icon-56 {
    background-position: -250px -250px
  }

  .help-icon-57 {
    background-position: -300px -250px
  }

  .help-icon-58 {
    background-position: -350px -250px
  }

  .help-icon-59 {
    background-position: -400px -250px
  }

  .help-icon-60 {
    background-position: -450px -250px
  }

  .help-icon-61 {
    background-position: -0px -300px
  }

  .help-icon-62 {
    background-position: -50px -300px
  }

  .help-icon-63 {
    background-position: -100px -300px
  }

  .help-icon-64 {
    background-position: -150px -300px
  }

  .help-icon-65 {
    background-position: -200px -300px
  }

  .help-icon-66 {
    background-position: -250px -300px
  }

  .help-icon-67 {
    background-position: -300px -300px
  }

  .help-icon-68 {
    background-position: -350px -300px
  }

  .help-icon-69 {
    background-position: -400px -300px
  }

  .help-icon-70 {
    background-position: -450px -300px
  }


  .help-icon-71 {
    background-position: -0px -350px
  }

  .help-icon-72 {
    background-position: -50px -350px
  }

  .help-icon-73 {
    background-position: -100px -350px
  }

  .help-icon-74 {
    background-position: -150px -350px
  }

  .help-icon-75 {
    background-position: -200px -350px
  }

  .help-icon-76 {
    background-position: -250px -350px
  }

  .help-icon-77 {
    background-position: -300px -350px
  }

  .help-icon-78 {
    background-position: -350px -350px
  }

  .help-icon-79 {
    background-position: -400px -350px
  }

  .help-icon-80 {
    background-position: -450px -350px
  }
</style>

</html>